const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')
const merge = require('lodash.merge')

const TARGET_NODE = process.env.WEBPACK_TARGET
const WEBPACK_ENTRY = process.env.WEBPACK_ENTRY
console.log(`WEBPACK_ENTRY`, WEBPACK_ENTRY)
module.exports = {
    // devServer: {
    //     historyApiFallback: true,
    //     headers: {'Access-Control-Allow-Origin': '*'}
    // },
    css: {
        extract: process.env.NODE_ENV === 'production'
    },
    configureWebpack: () => (
        {
            //入口文件指向配置文件
            entry: `./src/${WEBPACK_ENTRY}.js`,
            // entry: `./src/main.js`,
            // 对 bundle renderer 提供 source map 支持
            devtool: 'source-map',
            target: TARGET_NODE,
            output: {
                libraryTarget: TARGET_NODE === 'node' ? 'commonjs2' : undefined
            },
            externals: TARGET_NODE === 'node' ? nodeExternals({
                // 不要外置化 webpack 需要处理的依赖模块。
                // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
                // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
                allowlist: /\.css$/
            }) : undefined,
            optimization: {
                splitChunks: TARGET_NODE === 'node' ? false : undefined
            },
            // 这是将服务器的整个输出
            // 构建为单个 JSON 文件的插件。
            // 默认文件名为 `vue-ssr-server-bundle.json`
            plugins: [
                TARGET_NODE === 'node' ? new VueSSRServerPlugin() : new VueSSRClientPlugin()
            ]
        }
    ),
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return merge(options, {
                    optimizeSSR: false
                })
            })
    }
}
